<template>
  <div class="home">
    <situation-header class="header" />
    <div class="k-container k-flex k-justify-between">
      <div class="left">
        <card title="事件学习" height="182"> 1 </card>
        <card title="风险监控" height="174" class="card-box-content p10"> 2 </card>
        <card title="合规保证" height="220" class="card-box-content"> 3 </card>
        <card title="沟通推广" height="244" class="communication"> 4 </card>
      </div>
      <div class="middle k-flex-col">
        <div class="top k-flex">
          <card title="持续改进" height="172" class="improvement"> 5 </card>
          <card title="领导作用" height="172" class="leading-role"> 6 </card>
        </div>
        <div class="bottom">
          <p class="title">十大管理要素</p>
          7
        </div>
      </div>
      <div class="right">
        <card title="规划保障" height="122"> 8 </card>
        <card title="风险认知" height="208"> 9 </card>
        <card title="能力建设" height="110"> 10 </card>
        <card title="风险控制" height="350"> 11 </card>
      </div>
    </div>
  </div>
</template>

<script>
import "@/styles/container.scss";
import Card from "@/components/Card.vue";

export default {
  name: "RankingHome",
  components: {
    SituationHeader: () => import("@/components/Header"),
    Card,
  },
  data() {
    return {
      form: {
        communication: {},
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.left,
.right {
  animation-duration: 1s;
  animation-delay: 0.1s;
}
.middle {
  animation-duration: 3s;
  animation-delay: 0.1s;
}

.left,
.right {
  width: 430px;
}
.left {
  animation-name: fadeInLeft;
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.left {
  .communication {
    .comm-head-box {
      display: flex;
    }
    ::v-deep .el-radio-button__inner {
      background: rgba(1, 36, 74, 0.4);
      border-radius: 2px;
      border: 1px solid rgba(13, 121, 211, 0.52);
      font-size: 14px;
      font-family: Helvetica;
      color: #f8f9f9;
    }
    ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      background: linear-gradient(180deg, #0d79d3 0%, rgba(13, 121, 211, 0.2) 100%),
        linear-gradient(169deg, #0d79d3 0%, rgba(13, 121, 211, 0) 100%);
      border-radius: 2px;
      border: 1px solid;
      border-image: linear-gradient(
          315deg,
          rgba(32, 145, 239, 1),
          rgba(13, 121, 211, 0),
          rgba(40, 150, 241, 1)
        )
        1 1;
      font-size: 14px;
      font-family: Helvetica;
      color: #ffffff;
    }
  }
}

.middle {
  width: 1273px;
  margin: 0 20px;
  .top {
    .improvement {
      width: 320px;
    }
    .leading-role {
      margin-left: 20px;
      flex: 1;
    }
  }
  .bottom {
    position: relative;
    .manage {
      background: url("../../assets/imgs/manage.png") no-repeat;
      background-size: 100% 715px;
    }
    .title {
      position: absolute;
      width: 174px;
      height: 37px;
      font-size: 26px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 37px;
      letter-spacing: 3px;
      text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
      margin-left: 540px;
      top: 29px;
      left: 15px;
      display: inline-block;
      z-index: 3;
    }
  }
}
@media only screen and (min-width: 1920px) and (min-height: 1080px) {
  .middle {
    .bottom {
      .title {
        left: 0;
        margin-left: 410px;
        top: 20px;
      }
    }
  }
}
.middle {
  animation-name: fadeInMiddle;
}
@keyframes fadeInMiddle {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.card-box-content {
  ::v-deep .body-box {
    padding: 0;
  }
  &.p10 {
    padding: 5px;
  }
}

.right {
  animation-name: fadeInRight;
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
</style>
